<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            color: red;
        }
    </style>
</head>

<body>

    <div class="a">1111</div>

    <div>1111</div>

    <div>1111</div>

    <div>1111</div>


    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script>

        // jq获取元素   $('')
        //    parent()   prev()   next()   children()   find()


        // 事件  click()   mouseover()    mousedown()   .... 

        // 添加或者获取样式  css()
        // 类名操作  addClass   removeClass  toggleClass


        // 显隐动画
        //    hide()   show()       toggle()
        //    fadeIn()  fadeOut()    fadeToggle()
        //    slideUp()   slideDown()  slideToggle()

        // index()   返回对应的下标         ***************

        // eq(n)   与...等同的下标          ******************


        // 链式操作  。。。。





        $('div').click(function () {
            // alert(1)
            // $(this).css({
            //     color: 'red',
            //     fontSize: '20px'
            // })

            // $(this).css('color', 'red')
            // $(this).toggleClass('a');


            // $(this).html(888)
            console.log($(this).html());
        })





    </script>

</body>

</html>